<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
				<el-button type="primary" @click="toAdd">新增</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-form inline v-model="search" label-position="right">
						<el-form-item label="状态">
							<el-select v-model="search.status" placeholder="请选择" clearable>
								<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="标题">
							<el-input v-model="search.keyWord" placeholder="请输入" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTableGdshop ref="table" tableName="tuanActivityTable" :apiObj="apiObj" stripe remoteSort remoteFilter :params="tableParams"
						   :column="tableColumn">
				<template #activity_tag="scope">
					<div>{{ scope.row.activity_tag || '-' }}</div>
					<div>{{ scope.row.remark || '-' }}</div>
				</template>

				<template #header-activity_tag>
					<div>活动标签</div>
					<div>活动详情</div>
				</template>

				<template #time="scope">
					<div>{{ dateFormat(scope.row.start_time) }}</div>
					<div>{{ dateFormat(scope.row.end_time) }}</div>
				</template>

				<template #status="scope">
					<el-tooltip effect="dark" content="点击切换状态" placement="left">
						<el-button
							type="success"
							plain
							v-if="scope.row.status == 1"
							@click="setStatus(scope.row)"
						>正常</el-button>
						<el-button type="warning" plain v-else @click="setStatus(scope.row)"
						>禁用</el-button>
					</el-tooltip>
				</template>

				<el-table-column label="操作" fixed="right" align="center" width="110">
					<template #default="scope">
						<div>
							<el-button type="text" size="mini" @click="toShowRule(scope.row)">规则</el-button>
							<el-button type="text" size="mini" @click="toShowGoods(scope.row)">商品</el-button>
						</div>
						<div>
							<el-button type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
							<el-button type="text" size="mini" :disabled="scope.row.received_num > 0" @click="toDel(scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</scTableGdshop>
		</el-main>

		<goods-box ref="goodsBox" :baseUrl="baseUrl" />
		<rule-box ref="ruleBox" />
		<edit-box ref="editBox" @success="editSuccess" />
	</el-container>
</template>

<script>
import dayjs from "dayjs";
import {ElMessage, ElMessageBox} from "element-plus";
import goodsBox from "./goodsBox.vue";
import goodsListBox from "./goodsListBox.vue";
import editBox from "./edit.vue";
import ruleBox from "./ruleBox.vue";

export default {
	name: "marketing-tuan-discountActivity",
	components: {
		goodsBox,
		goodsListBox,
		ruleBox,
		editBox
	},
	data() {
		return{
			typeList: [
				{
					value: 1,
					label: '打折',
				},
				{
					value: 2,
					label: '满减',
				},
			],
			statusList: [
				{
					value: 1,
					label: '正常',
				},
				{
					value: 0,
					label: '禁用',
				},
			],
			apiObj: this.$API.shop.tuanActivity,
			baseUrl: '',
			search: {
				keyWord: '',
				activity_type: [6],
			},
			tableParams: {
				order: 'id desc',
			},
			tableColumn: [
				{
					prop: "activity_name",
					label: "活动名称",
					align: "center"
				},
				{
					prop: "activity_tag",
					label: "活动标签",
					align: "center"
				},
				{
					prop: "time",
					label: "活动时间",
					align: "center",
					width: 180
				},
				{
					prop: "goods_type",
					label: "商品类型",
					width: 80,
					formatter: (row, column, cellValue) => {
						switch (cellValue) {
							case 1:
								return '包含';
							case 2:
								return '排除';
							default:
								return '全部';
						}
					}
				},
				{
					prop: "create_at",
					label: "创建时间",
					width: 100,
					formatter: (row, column, cellValue) => {
						if (!cellValue) {
							return '-';
						}
						return dayjs.unix(cellValue).format('YYYY-MM-DD HH:mm:ss');
					}
				},
				{
					prop: "status",
					label: "状态",
					align: "center",
					width: 90,
					dict: [
						{
							label: "禁用",
							value: 0
						},
						{
							label: "正常",
							value: 1
						}
					]
				},
				{
					prop: "sort",
					label: "排序",
					width: 60
				},
			]
		}
	},
	mounted() {
		this.getBaseUrl();
	},
	methods:{
		async getBaseUrl() {
			this.baseUrl = await this.$TOOL.getBaseUrl(this.$API)
		},
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
			}
			this.$refs.table.refresh();
		},
		//搜索
		upsearch(){
			this.$refs.table.upData(this.search)
		},
		dateFormat(_time) {
			return dayjs.unix(_time).format('YYYY-MM-DD HH:mm:ss')
		},
		setStatus(row) {
			ElMessageBox.confirm("此操作将切换当前活动的状态, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					this.$API.shop.goodsActivity
						.setStatus({ activity_type:6,ids: [row.id] })
						.then((res) => {
							if (res.code === 0) {
								ElMessage.success("切换成功");
								row.status = row.status === 1 ? 0 : 1;
							}
							else {
								ElMessage.error("失败," + res.message);
							}
						})
						.catch((err) => {
							ElMessage.error("失败," + err);
						});
				})
				.catch(() => {});
		},
		toAdd() {
			this.$refs.editBox.add();
		},
		toEdit(row) {
			console.log(row);
			this.$refs.editBox.edit(row);
		},
		toDel(row) {
			this.$messageBox.confirm('确认删除《'+row.activity_name+'》吗？').then(() => {
				this.$API.shop.goodsActivity.delete({ids:row.id}).then(res => {
					if (res.code === 0) {
						this.$message.success('删除成功');
						this.tableRefresh()
					}
					else {
						this.$message.error('失败，' + res.message)
					}
				})
			}).catch()
		},
		toShowRule(row) {
			console.log(row);
			this.$refs.ruleBox.show(row.id, row.activity_type, row.activity_name);
		},
		toShowGoods(row) {
			console.log(row);
			this.$refs.goodsBox.show(row.id);
		},
		editSuccess() {
			this.tableRefresh()
		}
	}
}
</script>

<style scoped>

</style>
